<template>
	<view>
		<my-main title="选择产品" :padding="0" background="#fff"  isBack isNotDep :close="close">
			<my-cateTab :tabList="table.tbody" v-if="!table.loading">
				<template #item="{ item }">
					<my-cell :title="`${item.title}`" isBox>
						<my-list :options="item.children" :list="3" :margin="16" @click="click">
							<template #item="{ row }">
								<view>
									<view>
										<my-image size="100%" :src="row.url" :isPreview="false"></my-image>
									</view>
									<view class="title-good">
										{{ row.title }}
									</view>
								</view>
							</template>
						</my-list>
					</my-cell>
				</template>
			</my-cateTab>
		</my-main>
	</view>
</template>

<script lang="uts" setup>
//公共状态
import { useVue  } from '@/utils/useVue.uts'
const { reactive, ref,app,Token,onMounted,watch,http,goToPage,getPrevPageQuery,useAttrs } = useVue()
interface Props {
}
const props = withDefaults(defineProps<Props>(), {
})
// 所有未声明的属性都会进入 $attrs
const attrs = useAttrs()
// 合并所有属性（显式 props + attrs）
const allProps = {
  ...props,
  ...attrs
}
// 表单数据
const table:any = reactive({
	loading: true,//数据加载
	padding:0,
	search:{
		Enable: true,
		ProdName:"",
	},
	searchSet:{
		searchKey:'ProdName',
		searchLabel:'产品名称',
	},
	tbody:[],
})
const emit = defineEmits(['click','close'])
const click=(row:any)=>{
	emit('click',row)
}
const close=()=>{
	emit('close')
}
//搜索
const getTbody = (scrollSet?:any) => {
	table.loading=true
	http.request({
		url: 'api/ProdMan/GetAllLevsProdsV2',
		data: table.search,
		success: (res : any) => {
			table.tbody=res.map((el:any)=>({
				title:el.Label,
				children:el.Children?.map((child:any)=>({
					title:child.ProdName,
					url:child.ImgUrl || '',
					ProdCode:child.ProdCode || '',
				})) || []
			}))
			_scrollSet()
		},
		fail:()=>{
			_scrollSet()
		}
	})
	function _scrollSet(){
		table.loading=false
		if(scrollSet){
			scrollSet.triggered=false
		}
	}
}
onMounted(() => {
	getTbody()
})
</script>

<style scoped lang="scss">
.title-good {
	font-size: 24rpx;
	text-align: center;
	margin-top: 8rpx;
	-webkit-line-clamp: 1; /* 限制文本显示的行数为2行 */
	-webkit-box-orient: vertical; /* 设置盒模型布局方向为垂直 */
	display: -webkit-box; /* 使用旧版WebKit内核布局盒模型 */
	overflow: hidden; /* 超出部分隐藏 */
	text-overflow: ellipsis; /* 使用省略号表示被截断的部分 */
}
</style>
